/**
 * Created by ezgoing on 14/9/2014.
 */

 "use strict";
 (function (factory) {
     if (typeof define === 'function' && define.amd) {
         define(['jquery'], factory);
     } else {
         factory(jQuery);
     }
 }(function ($) {
     //建立一个cropbox的类
     var cropbox = function(options, el){
         var el = el || $(options.imageBox),
             obj =
             {
                 state : {},
                 //ratio放大倍数为1
                 ratio : 1,
                 //设置默认参数
                 options : options,
                 imageBox : el,
                 thumbBox : el.find(options.thumbBox),
                 spinner : el.find(options.spinner),
                 image : new Image(),
                 //获取图片的DataURL
                 getDataURL: function ()
                 {
                     var width = this.thumbBox.width(),
                         height = this.thumbBox.height(),
                         //建立一个canvas对象
                         canvas = document.createElement("canvas"),
                         dim = el.css('background-position').split(' '),
                         size = el.css('background-size').split(' '),
                         dx = parseInt(dim[0]) - el.width()/2 + width/2,
                         dy = parseInt(dim[1]) - el.height()/2 + height/2,
                         dw = parseInt(size[0]),
                         dh = parseInt(size[1]),
                         sh = parseInt(this.image.height),
                         sw = parseInt(this.image.width);
 
                     canvas.width = width;
                     canvas.height = height;
                     var context = canvas.getContext("2d");
                     context.drawImage(this.image, 0, 0, sw, sh, dx, dy, dw, dh);
                     var imageData = canvas.toDataURL('image/png');
                     return imageData;
                 },
                 getBlob: function()
                 {
                     var imageData = this.getDataURL();
                     var b64 = imageData.replace('data:image/png;base64,','');
                     var binary = atob(b64);
                     var array = [];
                     for (var i = 0; i < binary.length; i++) {
                         array.push(binary.charCodeAt(i));
                     }
                     return  new Blob([new Uint8Array(array)], {type: 'image/png'});
                 },
                 zoomIn: function ()
                 {
                     //设置放大倍数为1.1
                     this.ratio*=1.1;
                     setBackground();
                 },
                 zoomOut: function ()
                 {
                     //设置放大倍数为0.9
                     this.ratio*=0.9;
                     setBackground();
                 }
             },
             setBackground = function()
             {
                 var w =  150;//parseInt(obj.image.width)*obj.ratio;
                 var h =  150;//parseInt(obj.image.height)*obj.ratio;
 
                 var pw = (el.width() - w) / 4;
                 var ph = (el.height() - h) / 4;
 
                 el.css({
                     'background-image': 'url(' + obj.image.src + ')',
                     'background-size': 'contain',
                    //  'background-position':  'relative',
                     'background-repeat': 'no-repeat'});
             },
             //鼠标按下时变成可拖动状态
             imgMouseDown = function(e)
             {
                 e.stopImmediatePropagation();
 
                 obj.state.dragable = true;
                 obj.state.mouseX = e.clientX;
                 obj.state.mouseY = e.clientY;
             },
             imgMouseMove = function(e)
             {
                 e.stopImmediatePropagation();
                 //鼠标移动时dragable为true时，则移动
                 if (obj.state.dragable)
                 {
                     var x = e.clientX - obj.state.mouseX;
                     var y = e.clientY - obj.state.mouseY;
 
                     var bg = el.css('background-position').split(' ');
 
                     var bgX = x + parseInt(bg[0]);
                     var bgY = y + parseInt(bg[1]);
 
                     el.css('background-position', bgX +'px ' + bgY + 'px');
 
                     obj.state.mouseX = e.clientX;
                     obj.state.mouseY = e.clientY;
                     setTimeout(function(){
                         $('#btnCrop').click();
                     },10);
                 }
             },
             //鼠标松开时，dragable为false
             imgMouseUp = function(e)
             {
                 e.stopImmediatePropagation();
                 obj.state.dragable = false;
             },
             zoomImage = function(e)
             {
                 e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0 ? obj.ratio*=1.1 : obj.ratio*=0.9;
                 setBackground();
                 setTimeout(function(){
                     $('#btnCrop').click();
                 },10);
             }
 
         obj.spinner.show();
         obj.image.onload = function() {
             obj.spinner.hide();
             setBackground();
 
             el.bind('mousedown', imgMouseDown);
             el.bind('mousemove', imgMouseMove);
             $(window).bind('mouseup', imgMouseUp);
             el.bind('mousewheel DOMMouseScroll', zoomImage);
         };
         obj.image.src = options.imgSrc;
         el.on('remove', function(){$(window).unbind('mouseup', imgMouseUp)});
 
         return obj;
     };
 
     jQuery.fn.cropbox = function(options){
         return new cropbox(options, this);
     };
 }));
 
 /*www.jq22.com*/
 